import { AlertTriangle, Trash2, Info, AlertCircle, CheckCircle, HelpCircle, X } from 'lucide-react';

export type ConfirmType = 'delete' | 'warning' | 'info' | 'error' | 'success' | 'question';

export interface ConfirmDialogProps {
  isOpen: boolean;
  type?: ConfirmType;
  title: string;
  message: string;
  itemName?: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  onCancel: () => void;
  loading?: boolean;
  showWarning?: boolean; // 显示"此操作无法撤销"警告
}

const typeConfig = {
  delete: {
    icon: AlertTriangle,
    iconBg: 'bg-red-100',
    iconColor: 'text-red-600',
    confirmBg: 'bg-red-600',
    confirmHover: 'hover:bg-red-700',
    warningBg: 'bg-red-50',
    warningBorder: 'border-red-200',
    warningText: 'text-red-800',
    warningIconColor: 'text-red-600',
    confirmIcon: Trash2,
    defaultConfirmText: '确认删除',
    defaultTitle: '删除确认',
  },
  warning: {
    icon: AlertTriangle,
    iconBg: 'bg-yellow-100',
    iconColor: 'text-yellow-600',
    confirmBg: 'bg-yellow-600',
    confirmHover: 'hover:bg-yellow-700',
    warningBg: 'bg-yellow-50',
    warningBorder: 'border-yellow-200',
    warningText: 'text-yellow-800',
    warningIconColor: 'text-yellow-600',
    confirmIcon: AlertTriangle,
    defaultConfirmText: '确认',
    defaultTitle: '警告',
  },
  info: {
    icon: Info,
    iconBg: 'bg-blue-100',
    iconColor: 'text-blue-600',
    confirmBg: 'bg-blue-600',
    confirmHover: 'hover:bg-blue-700',
    warningBg: 'bg-blue-50',
    warningBorder: 'border-blue-200',
    warningText: 'text-blue-800',
    warningIconColor: 'text-blue-600',
    confirmIcon: Info,
    defaultConfirmText: '确认',
    defaultTitle: '信息',
  },
  error: {
    icon: AlertCircle,
    iconBg: 'bg-red-100',
    iconColor: 'text-red-600',
    confirmBg: 'bg-red-600',
    confirmHover: 'hover:bg-red-700',
    warningBg: 'bg-red-50',
    warningBorder: 'border-red-200',
    warningText: 'text-red-800',
    warningIconColor: 'text-red-600',
    confirmIcon: AlertCircle,
    defaultConfirmText: '确认',
    defaultTitle: '错误',
  },
  success: {
    icon: CheckCircle,
    iconBg: 'bg-green-100',
    iconColor: 'text-green-600',
    confirmBg: 'bg-green-600',
    confirmHover: 'hover:bg-green-700',
    warningBg: 'bg-green-50',
    warningBorder: 'border-green-200',
    warningText: 'text-green-800',
    warningIconColor: 'text-green-600',
    confirmIcon: CheckCircle,
    defaultConfirmText: '确认',
    defaultTitle: '成功',
  },
  question: {
    icon: HelpCircle,
    iconBg: 'bg-gray-100',
    iconColor: 'text-gray-600',
    confirmBg: 'bg-gray-600',
    confirmHover: 'hover:bg-gray-700',
    warningBg: 'bg-gray-50',
    warningBorder: 'border-gray-200',
    warningText: 'text-gray-800',
    warningIconColor: 'text-gray-600',
    confirmIcon: HelpCircle,
    defaultConfirmText: '确认',
    defaultTitle: '确认',
  },
};

export default function ConfirmDialog({
  isOpen,
  type = 'question',
  title,
  message,
  itemName,
  confirmText,
  cancelText = '取消',
  onConfirm,
  onCancel,
  loading = false,
  showWarning = false,
}: ConfirmDialogProps) {
  const config = typeConfig[type];
  const IconComponent = config.icon;
  const ConfirmIconComponent = config.confirmIcon;
  const finalConfirmText = confirmText || config.defaultConfirmText;

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg w-full max-w-md overflow-hidden">
        {/* Header */}
        <div className="p-6 pb-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div
                className={`w-10 h-10 ${config.iconBg} rounded-full flex items-center justify-center`}
              >
                <IconComponent className={`w-5 h-5 ${config.iconColor}`} />
              </div>
              <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
            </div>
            <button
              onClick={onCancel}
              disabled={loading}
              className="text-gray-400 hover:text-gray-600 disabled:opacity-50 cursor-pointer"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          <p className="text-gray-600 mb-4">{message}</p>

          {itemName && (
            <div className="bg-gray-50 rounded-lg p-3 mb-4">
              <p className="text-sm text-gray-700 font-medium break-all">{itemName}</p>
            </div>
          )}

          {showWarning && (
            <div className={`${config.warningBg} ${config.warningBorder} border rounded-lg p-3`}>
              <div className="flex items-center gap-2">
                <AlertTriangle className={`w-4 h-4 ${config.warningIconColor} flex-shrink-0`} />
                <p className={`text-sm ${config.warningText}`}>
                  {type === 'delete' ? '此操作无法撤销，请谨慎操作。' : '请仔细确认您的选择。'}
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="p-6 pt-0 flex gap-3 justify-end">
          <button
            onClick={onCancel}
            disabled={loading}
            className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            disabled={loading}
            className={`px-4 py-2 ${config.confirmBg} text-white rounded-lg ${config.confirmHover} disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center gap-2`}
          >
            {loading ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
                处理中...
              </>
            ) : (
              <>
                <ConfirmIconComponent className="w-4 h-4" />
                {finalConfirmText}
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}
